import { Form, Input, Modal } from 'antd'
import { CreateCategoryRequest, UpdateCategoryRequest } from '../../../api/category'

interface CategoryFormModalProps<T> {
  name:string;
  open: boolean;
  title: string;
  onOK: (values: T) => void;
  onCancel: () => void;
  okText?: string;
  initialValues?: Partial<T>
}
const FavoriteFormModal = <T extends UpdateCategoryRequest|CreateCategoryRequest>({
  name,
  open,
  onOK: onCreate,
  onCancel,
  title,
  okText = '确认',
  initialValues
}:CategoryFormModalProps<T>):JSX.Element => {
  const [form] = Form.useForm<T>()
  return (
    <>
      <Modal
        open={open}
        title={title}
        okText={okText}
        cancelText='取消'
        onCancel={onCancel}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              form.resetFields()
              onCreate(values)
            })
            .catch((info: unknown) => {
              console.log('Validate Failed:', info)
            })
        }}
      >
        <Form
          form={form}
          layout="vertical"
          name={name}
          initialValues={initialValues}
        >
          <Form.Item
            name="name"
            label="名称"
            rules={[{ required: true, message: 'Please input the title of collection!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            name="desc"
            label="简介"
            rules={[{ required: true, message: 'Please input the Description of collection!' }]}
          >
            <Input type="textarea" />
          </Form.Item>
        </Form>
      </Modal>
    </>

  )
}

export default FavoriteFormModal